<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>日历</title>
    <link rel="stylesheet" href="css/tdCalendarWrap.css">
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="tdCalendarWrap" id="tdCalendarWrap">

    <!--周-->
    <div class="weekList">
        <span class="weekItem restDay">日</span>
        <span class="weekItem">一</span>
        <span class="weekItem">二</span>
        <span class="weekItem">三</span>
        <span class="weekItem">四</span>
        <span class="weekItem">五</span>
        <span class="weekItem restDay">六</span>
    </div>

    <div class="calendarInfo">

        <div class="calendarItem">
            <div class="yearMonth">2021年4月</div>

            <div class="dayListBox">
                <ul class="dayList">
                    <li class="dayItem"></li>
                    <li class="dayItem"></li>
                    <li class="dayItem"></li>
                    <li class="dayItem"></li>
                    <li class="dayItem yesChoice active">
                        <span class="dayNum">01</span>
                        <span class="tipsFont">抢</span>
                    </li>
                    <li class="dayItem yesChoice active">
                        <span class="dayNum">02</span>
                        <span class="tipsFont">抢</span>
                    </li>
                    <li class="dayItem yesChoice">
                        <span class="holidaySign">休</span>
                        <span class="dayNum">03</span>
                        <span class="tipsFont">抢</span>
                    </li>
                </ul>
                <ul class="dayList">
                    <li class="dayItem yesChoice active">
                        <span class="holidaySign">休</span>
                        <span class="dayNum">04</span>
                        <span class="tipsFont">抢</span>
                    </li>
                    <li class="dayItem noChoice">
                        <span class="holidaySign">休</span>
                        <span class="dayNum">05</span>
                        <span class="tipsFont"></span>
                    </li>
                    <li class="dayItem noChoice">
                        <span class="dayNum">06</span>
                        <span class="tipsFont"></span>
                    </li>
                    <li class="dayItem yesChoice">
                        <span class="dayNum">07</span>
                        <span class="tipsFont">抢</span>
                    </li>
                    <li class="dayItem noChoice">
                        <span class="dayNum">08</span>
                        <span class="tipsFont"></span>
                    </li>
                    <li class="dayItem yesChoice active">
                        <span class="dayNum">09</span>
                        <span class="tipsFont">抢</span>
                    </li>
                    <li class="dayItem yesChoice">
                        <span class="dayNum">10</span>
                        <span class="tipsFont">抢</span>
                    </li>
                </ul>
            </div>

        </div>

    </div>

</div>
</body>
<script>

    // 用于计算 rem 和 px
    function getRem(pwidth, prem) {
        var html = document.getElementsByTagName("html")[0];
        var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
        html.style.fontSize = oWidth / pwidth * prem + "px";
    }

    $(document).ready(function () {
        //do something
        getRem(750, 100)
    });
    window.onresize = function () {
        getRem(750, 100)
    };
</script>
</html>

